<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/color.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="产品分类" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'产品信息',iconCls:'icon-ok'">
            <table id="dg"></table>
            <div id="tb" style="padding:2px 5px;">
                <input id="goodsname" label="用户名称:" style="width:100%;">
                <a href="#" id="searchData" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
                <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
                <a href="#" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">批量删除</a>
            </div>
            <div id="dlg" class="easyui-dialog" title="编辑产品" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:300px;padding:10px">
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                    <input name="_id" style="width:100%" type="hidden">
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="goodsname" style="width:300px" data-options="label:'商品名称:',required:true,missingMessage:'请填写名称'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="goodstitle" style="width:300px" data-options="label:'商品标题:',required:true,missingMessage:'请填写标题'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input type="text" class="easyui-numberbox" style="width:300px" name="price" value="888" data-options="min:999,max:9999,precision:2,label:'原　　价:',required:true,missingMessage:'请填写原价',prefix:'￥'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input type="text" class="easyui-numberbox" style="width:300px" name="oldprice" value="888" data-options="min:49,max:9999,precision:2,label:'平时售价:',required:true,missingMessage:'请填写平时售价',prefix:'￥'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input type="text" class="easyui-numberbox" style="width:300px" name="newprice" value="888" data-options="min:49,max:9999,precision:2,label:'促销价格:',required:true,missingMessage:'请填写促销价',prefix:'￥'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input type="text" style="width:300px" class="easyui-numberbox" name="num" value="0001" data-options="min:0001,max:9999,precision:0,label:'商品编号:',required:true,missingMessage:'请填写编号',prefix:'#'">
                    </div>
                    <div style="margin-bottom:20px">
                        <select id="cc" class="easyui-combobox" name="vip" style="width:300px;" data-options="label:'会　　员:',editable:false,panelHeight:'auto',required:true,missingMessage:'请选择会员'">
                            <option value="普通会员">普通会员</option>
                            <option value="天美V1会员">天美V1会员</option>
                            <option value="天美V2会员">天美V2会员</option>
                            <option value="天美V3会员">天美V3会员</option>
                            <option value="天美V4会员">天美V4会员</option>
                            <option value="天美V5会员">天美V5会员</option>
                            <option value="天美至尊会员">天美至尊会员</option>
                        </select>
                    </div>
                    <div style="margin-bottom:20px">
                        <input type="text" style="width:300px" class="easyui-numberbox" name="total" value="10" data-options="min:0,max:9999,precision:0,label:'商品库存:',required:true,missingMessage:'请填写库存'">
                    </div>
                    <div style="margin-bottom:20px">
                        <select id="cc" class="easyui-combobox" name="type" style="width:300px" data-options="label:'类　　别:',editable:false,panelHeight:'auto',required:true,missingMessage:'请选择类别'">
                            <option value="服装">服装</option>
                            <option value="家居家电">家居家电</option>
                            <option value="数码">数码</option>
                            <option value="化妆品">化妆品</option>
                            <option value="厨房用具">厨房用具</option>
                        </select>
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="keyword" style="width:300px" data-options="label:'关键字词:',required:true,missingMessage:'请填写关键字'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input type="text" class="easyui-datetimebox" style="width:300px" name="date"  data-options="label:'日　　期:',required:true,missingMessage:'请选择日期'">
                    </div>
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清除</a>
                </div>
            </div>
            <div id="dlg3" class="easyui-dialog" title="产品评论" data-options="iconCls:'icon-save',closed: true,fit:true" style="width:800px;height:400px;padding:10px">
                <table id="dgx"></table>
                        <div id="tbx" style="padding:2px 5px;">
                            <input id="namex" label="用户名称:" style="width:100%;">
                            <a href="#" id="searchDatax" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
                            <a href="#" id="addDatax" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
                            <a href="#" id="removesDatax" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">批量删除</a>
                        </div>

                        <div id="dlgx" class="easyui-dialog" title="增加评论" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:400px;padding:10px">
                            <form id="ffx" class="easyui-form" method="post" data-options="novalidate:true">
                                    <input  id="cid" name="bdid" style="width:100%" type="hidden">
                                    <input  id="cty" name="bdtype" style="width:100%" type="hidden" >
                                    <input  id="cbsid" name="_id" style="width:100%" type="hidden" >
                                <div style="margin-bottom:20px">
                                    <input class="easyui-textbox" name="pluser" style="width:100%" data-options="label:'评论用户:',required:true,missingMessage:'请填写评论用户'">
                                </div>
                                <div style="margin-bottom:20px">
                                        <select class="easyui-combobox" name="pllvl" style="width:100%" data-options="label:'评论等级:',required:true,missingMessage:'请选择等级',editable:false,panelHeight:'auto'"><option value="好评">好评</option><option value="中评">中评</option><option value="差评">差评</option></select>
                                </div>
                                <div style="margin-bottom:20px">
                                    <input class="easyui-textbox"  name="plcontent" style="width:100%" data-options="label:'评论内容:',required:true,missingMessage:'请填写内容',height:66,multiline:true">
                                </div>
                                <div style="margin-bottom:20px">
                                    <!-- <input class="easyui-textbox" name="date" style="width:100%" data-options="label:'发布时间:',required:true"> -->
                                    <input class="easyui-datetimebox" name="pldate" style="width:100%" data-options="label:'评论时间:',required:true,missingMessage:'请选择时间',showSeconds:false" >
                                </div>
                            </form>
                            <div style="text-align:center;padding:5px 0">
                                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitFormx()" style="width:80px">提交</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearFormx()" style="width:80px">取消</a>
                            </div>
                        </div>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    var newsId = '';
    $('#tt').tree({
        url: `${window.parent.globalURL}cate/list/2`,
        onClick: function(node) {
            //console.log(node);
            $('#dg').datagrid({
                queryParams: {
                    productId: node._id
                }
            });
        }
    });

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                if ($(this).form('enableValidation').form('validate')) {
                    // 将当前页面的表单信息进行获取，然后进行ajax请求
                    var formData = $("#ff").serializeJSON();
                    if ($('#tt').tree('getSelected')) {
                        formData.productId = $('#tt').tree('getSelected')._id;
                    }
                    if (formData._id.length > 0) {
                        // update
                        //formData._id = $('#tt').tree('getSelected')._id;
                        $.ajax({
                            url: `${window.parent.globalURL}product/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    } else {
                        // add
                        delete formData._id;

                        $.ajax({
                            url: `${window.parent.globalURL}product`,
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    }
                }
                return false; // 阻止默认事件
            }

        });

    }

    function clearForm() {
        $('#ff').form('clear');
    }

    function renderTime(date) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
    }
    $('#dg').datagrid({
        url: `${window.parent.globalURL}product/list`,
        fit: 'true',
        border: false,
        pagination: true,
        toolbar: '#tb',
        onLoadSuccess:function(data){$("a[name='a1']").linkbutton({plain:true})},
        columns: [
            [{
                field: 'ck',
                checkbox: true
            }, {
                field: 'goodsname',
                title: '商品名称',
                width: 100
            }, {
                field: 'goodstitle',
                title: '商品标题'
            }, {
                field: 'price',
                title: '原价',
                width: 100,
                formatter: function(value, row, index) {
                    return `<span style="text-align:right;display:block;widht:100%">${'￥'+row.price}</span>`;
                }
            }, {
                field: 'oldprice',
                title: '平时售价',
                width: 100,
                formatter: function(value, row, index) {
                    return `<span style="text-align:right;display:block;widht:100%">${'￥'+row.oldprice}</span>`;
                }
            }, {
                field: 'newprice',
                title: '促销价',
                width: 100,
                formatter: function(value, row, index) {
                    return `<span style="text-align:right;display:block;widht:100%">${'￥'+row.newprice}</span>`;
                }
            }, {
                field: 'num',
                title: '商品编号',
                width: 80,
                formatter: function(value, row, index) {
                    return `<span>${'#'+row.num}</span>`;
                }
            }, {
                field: 'vip',
                title: '会员',
                // formatter: function(value, row, index) {
                //     if (row.vip) {
                //         return `<span>天美V8会员</span>`;
                //     } else {
                //         return `<span>普通会员</span>`;
                //     }
                // }
            }, {
                field: 'total',
                title: '库存',
                width: 80,
            }, {
                field: 'type',
                title: '类别',
                width: 80,
            }, {
                field: 'keyword',
                title: '关键字',
                width: 80,
            }, {
                field: 'Date',
                title: '日期',
                formatter: function(value, row, index) {
                    return `<span>${renderTime(row.date)}</span>`;
                }
            }, {
                field: '_id',
                title: '操作',
                width: 150,
                formatter: function(value, row, index) {
                    return `<a href="javascript:void(0)" name="a1" class="c3" onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" name="a1" class="c7" onclick="deleteData('${row._id}')">删除</a>
                    <a href="javascript:void(0)" name="a1" class="c8"  onclick="showComment('${row._id}')">评论</a>`
                }
            }]
        ]
    });
//评论-------------------------------------
//评论
var idstr ='';
function showComment(id){
    idstr=id;
    $('#dlg3').dialog('open');
    showrright(id);

}

//评论内功能
//---------------------------------
function showrright(id){
    $('#dgx').datagrid({
    url:`${window.parent.globalURL}comment/list`,
    fit:'true',
    border:false,
    pagination:true,
    toolbar:'#tbx',
    queryParams: {
            pltype:2,
            plid:id ,
    },
    onLoadSuccess:function(data){$("a[name='a2']").linkbutton({plain:true})},
    columns:[[
        {field:'ck',checkbox:true},
        {field:'pluser',title:'用户名称',width:100},
        {field:'pllvl',title:'评论等级',width:100},
        {field:'plcontent',title:'评论内容',width:200},
        {field:'pldate',title:'评论时间',width:190,formatter: function(value, row, index) {
            return `<span>${renderTime(row.pldate)}</span>`;
            }
        },
        {field:'_id',title:'操作', width:150,
            formatter: function(value,row,index){
                return `<a href="javascript:void(0)" name="a2" class="c3"  onclick="updateDatax('${row._id}')">修改</a> <a href="javascript:void(0)" name="a2" class="c7" onclick="deleteDatax('${row._id}')">删除</a>`
            }
		}
    ]]
});
}
$("#addDatax").click(function(){
        $('#ffx').form('clear');
        $('#cid').val(idstr);
        $('#cty').val(2);
        $('#dlgx').dialog('open');
        //$('#addid').val(node);

})

$("#removesDatax").click(function(){
    deleteDatas();
})
 function submitFormx(){
    $('#ffx').form('submit',{
        onSubmit:function(){
           if($(this).form('enableValidation').form('validate')){
                // 将当前页面的表单信息进行获取，然后进行ajax请求
                var formData = $("#ffx").serializeJSON();
                    // add
                    //delete formData._id;
                    if(formData._id.length > 0){
                    // update
                    $.ajax({
                        url:`${window.parent.globalURL}comment/${formData._id}`,
                        type:'put',
                        data: formData
                    }).done(function(res){
                        $('#dlgx').dialog('close');
                        $('#dgx').datagrid('reload');
                        $('#ffx').form('clear');
                    })
                }else{
                    // add
                    delete formData._id;
                    $.ajax({
                        url:`${window.parent.globalURL}comment`,
                        type:'post',
                        data: formData
                    }).done(function(res){
                        $('#dlgx').dialog('close');
                        $('#dgx').datagrid('reload');
                        $('#ffx').form('clear');
                    })
                }
           }
           return false; // 阻止默认事件
            // 表单验证
        }
    });

}


//修改函数
function updateDatax(id){
    $('#ffx').form('clear');
    $.ajax({
        url:`${window.parent.globalURL}comment/${id}`,
        type:'put'
    }).done(function(res){
        $('#ffx').form('load',res);
        $('#dlgx').dialog('open');
    })
}


function deleteDatax(id){
    $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}comment/${id}`,
                type:'delete'
            }).done(function(res){
                $("#dgx").datagrid('reload');
            })
        }
    });

}

//删除多个
function deleteDatasx(){
  var rows = $('#dgx').datagrid('getSelections');
  var ids = [];
  for(var i=0;i<rows.length;i++){
    ids.push(rows[i]._id);
  }

  $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}comment/removes`,
                type:'post',
                data:{
                    ids: ids.toString()
                }
            }).done(function(res){
                $("#dgx").datagrid('reload');
            })
        }
    });

}

$("#searchDatax").click(function(){
    $('#dgx').datagrid({
        queryParams: {
            name: $("#namex").val(),
            plid:idstr
        }
    });
})

//-------------------------------------
//-----------------------------
    function deleteData(id) {

        $.messager.confirm('确认对话框', '你确认删除?', function(r) {
            if (r) {

                $.ajax({
                    url: `${window.parent.globalURL}product/${id}`,
                    type: 'delete'
                }).done(function(res) {
                    $("#dg").datagrid('reload');
                })
            }
        });

    }

    function updateData(id) {
        clearForm();
        $.ajax({
            url: `${window.parent.globalURL}product/${id}`,
            type: 'get'
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })

    }

    function deleteDatas() {
        var rows = $('#dg').datagrid('getSelections');
        var ids = [];
        for (var i = 0; i < rows.length; i++) {
            ids.push(rows[i]._id);
        }

        $.messager.confirm('确认对话框', '你确认删除?', function(r) {
            if (r) {
                $.ajax({
                    url: `${window.parent.globalURL}product/removes`,
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).done(function(res) {
                    $("#dg").datagrid('reload');
                })
            }
        });


    }

    $("#searchData").click(function() {
        $('#dg').datagrid({
            queryParams: {
                goodsname: $("#goodsname").val()
            }
        });
    })


    $("#addData").click(function() {
        clearForm();
        if ($('#tt').tree('getSelected')) {
            $('#dlg').dialog('open');
        } else {
            $.messager.alert('警告','请选择产品分类');

        }
    })

    $("#removesData").click(function() {
        deleteDatas();
    })
</script>